<template>
    <div class="edu-page-warp">
        <!--缴费结果查询页面-->
        <ConditionCard shadow="never" body-style="padding: 24px 24px 6px 24px;" label-position="right" @search="search" @reset="reset">
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="120px">
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                    <el-form-item label="年级:" prop="grade">
                        <el-date-picker
                            style="width:100%"
                            v-model="queryForm.grade"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择年级"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="学院">
                    <DictSelect
                        v-model="queryForm.faculty"
                        :data="options.faculty"
                        :clearable="false"
                        @change="changeFaculty"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="专业">
                    <DictSelect
                        v-model="queryForm.profession"
                        :data="options.profession"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                <el-form-item label="培养层次">
                    <DictSelect
                        v-model="queryForm.trainingLevel"
                        :data="options.trainingLevel"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="培养类别">
                    <DictSelect
                        v-model="queryForm.studentCategory"
                        :data="options.studentCategory"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="学位类型">
                    <DictSelect
                        v-model="queryForm.degreeType"
                        :data="options.degreeType"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                <el-form-item label="学习形式">
                    <DictSelect
                        v-model="queryForm.learningForm"
                        :data="options.learningForm"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--暂时没有字典数据-->
                <el-form-item label="缴费状态">
                    <DictSelect
                        v-model="queryForm.learningForm"
                        :data="options.learningForm"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            </el-form>
        </ConditionCard>
        <div class="edu-page-title mg-top">缴费结果查询</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button plain @click="exportFile()">导出</el-button>
                </div>
            </div>
            <edu-table stripe style="width: 100%"
                @page-change="handleCurrentChange"
                :data="students"
                :total="students.length"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
                :pagination='true'
                :selection="true"
                :order="false"
                @selection-change="handlerSelectionChange"
            >
                <el-table-column label="学期" width="100">
                    <template slot-scope="scope">{{ scope.row.term }}</template>
                </el-table-column>
                <el-table-column prop="studentId" label="学号" width="80"/>
                <el-table-column label="姓名" width="100">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="年级" width="100">
                    <template slot-scope="scope">{{ scope.row.grade }}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.professionI18n }}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column label="培养类别">
                    <template slot-scope="scope">{{ scope.row.studentCategoryI18n }}</template>
                </el-table-column>
                 <el-table-column label="学位类型">
                    <template slot-scope="scope">{{ scope.row.degreeTypeI18n }}</template>
                </el-table-column>
                 <el-table-column label="学习形式">
                    <template slot-scope="scope">{{ scope.row.learningFormI18n }}</template>
                </el-table-column>
                <el-table-column label="缴费状态">
                    <template slot-scope="scope">{{ scope.row.learningFormI18n }}</template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>

import { queryDic } from "common/src/api/dictionary";
import utils from "common/src/utils/utils";
export default {
    name: "paymentRusult",
    data() {
       
        return {
            loading: false,
            formLabelWidth: "100px",
            queryForm: {
                grade: "",
                faculty: "",
                trainingLevel: "",
                profession: "",
                studentCategory: "",
                keyWord: "",
                pageNum_: 1,
                pageSize_: 20
            },
            options: {
                trainingLevel: [],
                faculty: [],
                profession: [],
                studentCategory: []
            },
            students: [{},{}],
            total: 0,
            selectedItems: [],
         
        };
    },
    mounted() {
        this.initOptions();
    },
    methods: {
      
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX", "X_PYLB"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                    //this.onSubmit();
                }
            });
        },
        changeFaculty(val) {
            this.options["profession"] = [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) this._fill("profession", res.data.G_ZY);
            });
        },
        fillSelect(data) {
            let { X_PYCC, X_YX, X_PYLB } = data;
            this._fill("trainingLevel", X_PYCC);
            this._fill("faculty", X_YX);
            this._fill("studentCategory", X_PYLB);
            // this._fill("profession", data.G_ZY);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.onSubmit();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.onSubmit();
        },
        handlerSelectionChange(val) {
            this.selectedItems = val;
        },
        reset() {
            this.queryForm.trainingLevel = "";
            this.queryForm.grade = "";
            this.queryForm.faculty = "";
            this.queryForm.profession = "";
            this.queryForm.studentCategory = "";
            this.queryForm.keyWord = "";
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.onSubmit();
        },
      
        exportFile() {
            
        },
       
    },

};
</script>
<style>
</style>
